<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>websocket在线测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <meta charset="utf-8"/>
    <style>
        .zone_conn {
            margin-left: 20px;
            margin-top: 20px
        }

        .zone_send {
            clear: both;
            margin-left: 20px;
            margin-top: 20px
        }

        .zone_send textarea {
            width: 430px
        }

        #btn_send {
            width: 430px
        }

        #div_msg {
            overflow-y: auto
        }

        .clearboth {
            color: gray;
            clear: both;
            margin-left: 20px;
            padding-top: 5px
        }
    </style>
</head>
<body>
<div>
    <div class="zone_conn">
        <button type="button" id="btn_conn" class="btn btn-primary"
                style="float:left;margin-left:10px;margin-right:10px;" onclick="fun_ws();">连接后台
        </button>
        <button type="button" id="btn_bind" class="btn btn-primary"
                style="float:left;margin-left:10px;margin-right:10px;" onclick="fun_bind();">绑定后台
        </button>
        <button type="button" id="btn_close" class="btn btn-danger" style="float:left;" disabled="disabled"
                onclick="fun_close();">断开
        </button>
    </div>
    <div class="clearboth" style='width:430px;'>
        1、演示客户端ws数据请求与发送<br/>
        2、对于<span style="color:red">内网</span>的测试环境，只需填入服务端的<span style="color:red">内网IP</span>和端口<br/>
        3、可连接我上面提供的服务端ws地址来测试您<span style="color:red">自己的客户端</span>
    </div>
    <div class="zone_send">
        <textarea id="inp_send" class="form-control" style="height:100px;" placeholder="发送的内容"></textarea>
        <br/>
        <button type="button" id="btn_send" class="btn btn-info" onclick="fun_send();">发送（ctrl+回车）</button>
        <div style='color:red;line-height:30px;'>http主机:<input type="text" id="host" name="host" value="http://sm.51wpu.com.cn" style="color: blue">http://ic.com</div>
        <div style='color:red;line-height:30px;'>ws主机:<input type="text" id="wss" name="wss" value="ws://sm.51wpu.com.cn" style="color: blue"></div>
        <div style='margin-top:10px;color:#ff0000;line-height:30px;'>1、客服编号:<input type="text" id="staff_no" name="user" value="PXS003262" style="color: blue"></div>
        <div style='margin-top:10px;color:#ff0000;line-height:30px;'>2、用户编号:<input type="text" id="user_no" name="user" value="Y2055" style="color: blue"></div>
        <div style='color:red;line-height:30px;'>3、店铺名称:<input type="text" id="dm" name="dm" value="花店" style="color: blue"></div>
        <div style='color:red;line-height:30px;'>4、店铺图片url:<input type="text" id="dp" name="dp" value="" style="color: blue"></div>
        <br/>

    </div>
</div>
<div style="position:absolute;top:120px;left:470px">
    <div id="div_msgzone" class="panel panel-default">
        <div class="panel-heading">消息窗口</div>
        <div id="div_msg" class="panel-body" style="width: 940px; height: 374px;"></div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

<script>
    // $("#host").attr('value',localStorage.getItem("host"))
    // $("#wss").attr('value',localStorage.getItem("wss"))
    $("#user").attr('value',localStorage.getItem("user"))
    $("#info").attr('value',localStorage.getItem("info"))
    $("#dm").attr('value',localStorage.getItem("dm"))
    $("#dp").attr('value',localStorage.getItem("dp"))

    var clientId = ""
    function fun_ws() {
        try {
            ws = new WebSocket($('#wss').val() + "/ws");
            ws.onopen = function () {
                output("Websocket连接已建立，正在等待数据...", 0)
            }
            ws.onmessage = function (a) {
                output(a.data, 0)
                console.log(a.data);

                var da  = JSON.parse(a.data)
                console.log(da.client_id);
                console.log("----------------")
                clientId = da.client_id

            }
            ws.onclose = function () {
                $("#btn_conn").attr("disabled", !1)
                $("#btn_close").attr("disabled", !0)
                output("和服务器断开连接！", 0)
            }
        } catch (a) {
            $("#btn_conn").attr("disabled", !1)
            $("#btn_close").attr("disabled", !0)
            output("ws的地址错误,请重新输入！", 1)
        }
    }

    function fun_bind(){
        console.log(clientId);
        $.ajax({
            url: $('#host').val() + "/pxs/ws_bind",
            type: "post",
            data: {
                client_id: clientId,
                user_no: $('#user_no').val()
            },
            success: function (res) {
                $("#btn_bind").attr("disabled", !1);
            }
        })
    }


    function fun_send() {
        if ("undefined" == typeof ws) {
            alert("请先连接websocket！")
            return
        }
        var a = $.trim($("#inp_send").val());
        if (a !== "") {
            $.ajax({
                url: $('#host').val() + "/pxs/send_info",
                type: "post",
                data: {
                    send_user_no: $('#user_no').val(),
                    to_staff_no: $('#staff_no').val(),
                    chat_info: a,
                    store_id:0,
                    mobile:"",
                },
                success: function (res) {
                    $("#btn_bind").attr("disabled", !1);
                }
            })
        } else {
            alert("请输入内容！")
        }

    }

    function fun_close() {
        ws.close()
    }

    function output(a, b) {
        var f, c = new Date, d = "blue", e = "服务器";
        if (b === 1) {
            d = "green";
            e = "你";
        }
        f = "<div style='color:" + d + "'>" + e + " " + c.getHours() + ":" + c.getMinutes() + ":" + c.getSeconds() + "</div>";
        $("#div_msg").append("<div style='margin-bottom:10px;position:relative;left:0px;'>" + f + a + "</div>");
        $("#div_msg").scrollTop($("#div_msg")[0].scrollHeight)
    }
</script>
</body>
</html>
